<template>
  <Empty>
    <Form
      :form-data="formData"
      :control-list="controlList"
      type="submit"
      :inline="false"
      width="500px"
      @entry="entry"
    ></Form>
  </Empty>
</template>

<script>
import Empty from "@/views/component/empty/index.vue";
import Form from "@/views/owner/form.vue";
import {
  stringEmptyValidator,
  startEndEmptyValidator,
} from "@/utils/validator";
import { showCreateNg, showCreateOk } from "@/utils/message";
import { createOwner } from "@/api/owner";
import { getQuestionConfig } from "@/api/config";
function getAllMonth() {
  let result = [];
  for (let i = 1; i <= 12; i++) {
    let item = {
      label: `${i}月`,
      value: `${i}月`,
    };
    result.push(item);
  }
  return result;
}
export default {
  name: "CreateOwnerForm",
  components: {
    Empty,
    Form,
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.getQuestionConfig();
      await vm.setControlList();
    });
  },
  methods: {
    async getQuestionConfig() {
      let result = await getQuestionConfig();
      this.questionConfig = result.data;
    },
    async entry(formData) {
      formData = { ...formData };
      try {
        formData.departmentQuestion = JSON.stringify(
          formData.departmentQuestion
        );
        formData.payMonth = JSON.stringify(formData.payMonth);
        await createOwner(formData);
        showCreateOk();
        this.$router.back();
      } catch (error) {
        showCreateNg();
      }
    },
    setControlList() {
      this.controlList = [
        {
          type: "input",
          label: "姓名",
          prop: "name",
          clearable: true,
          change: (event) => {
            this.formData.name = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
        {
          type: "select",
          label: "组团",
          prop: "groupName",
          change: (event) => {
            this.formData.groupName = event ?? "";
          },
          optionList: [
            {
              label: "超豪样板间",
              value: "超豪样板间",
            },
            {
              label: "峰景",
              value: "峰景",
            },
            {
              label: "凤鸣翠岭",
              value: "凤鸣翠岭",
            },
            {
              label: "观山",
              value: "观山",
            },
            {
              label: "观山二期",
              value: "观山二期",
            },
            {
              label: "山居小墅",
              value: "山居小墅",
            },
            {
              label: "山语",
              value: "山语",
            },
            {
              label: "商铺",
              value: "商铺",
            },
            {
              label: "桐林人家",
              value: "桐林人家",
            },
            {
              label: "玺园",
              value: "玺园",
            },
            {
              label: "映山",
              value: "映山",
            },
            {
              label: "锦绣江山",
              value: "锦绣江山",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
        {
          type: "input",
          label: "路址",
          prop: "address",
          clearable: true,
          change: (event) => {
            this.formData.address = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
        {
          type: "select",
          label: "房屋类型",
          prop: "homeType",
          change: (event) => {
            this.formData.homeType = event ?? "";
          },
          optionList: [
            {
              label: "住宅",
              value: "住宅",
            },
            {
              label: "商铺",
              value: "商铺",
            },
            {
              label: "车库",
              value: "车库",
            },
            {
              label: "车位",
              value: "车位",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: startEndEmptyValidator,
            },
          ],
        },
        {
          type: "select",
          label: "房屋状态",
          prop: "homeStatus",
          change: (event) => {
            this.formData.homeStatus = event ?? "";
          },
          optionList: [
            {
              label: "已售已收楼",
              value: "已售已收楼",
            },
            {
              label: "应收未收楼",
              value: "应收未收楼",
            },
            {
              label: "已售未到合同收楼期",
              value: "已售未到合同收楼期",
            },
            {
              label: "未收空置",
              value: "未收空置",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: startEndEmptyValidator,
            },
          ],
        },
        {
          type: "select",
          label: "业主类别",
          prop: "ownerType",
          change: (event) => {
            this.formData.ownerType = event ?? "";
          },
          optionList: [
            {
              label: "A 友好关系户",
              value: "A 友好关系户",
            },
            {
              label: "B 一般客户",
              value: "B 一般客户",
            },
            {
              label: "E 意见客户",
              value: "E 意见客户",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: startEndEmptyValidator,
            },
          ],
        },
        {
          type: "radio-group",
          label: "是否装修",
          prop: "decorationStatus",
          progress: 0,
          change: (event) => {
            this.formData.decorationStatus = event ?? "";
          },
          radioList: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (value.length === 0) {
                  return callback(new Error("必填项未填写"));
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "radio-group",
          label: "是否常住",
          prop: "liveStatus",
          progress: 0,
          change: (event) => {
            this.formData.liveStatus = event ?? [];
          },
          radioList: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (value.length === 0) {
                  return callback(new Error("必填项未填写"));
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "radio-group",
          label: "是否欠费",
          prop: "oweStatus",
          progress: 0,
          change: (event) => {
            this.formData.roleUuidList = event ?? [];
          },
          radioList: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (value.length === 0) {
                  return callback(new Error("必填项未填写"));
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "select",
          label: "缴费习惯",
          prop: "payStyle",
          clearable: true,
          change: (event) => {
            this.formData.payStyle = event ?? "";
          },
          optionList: [
            {
              label: "月度缴费",
              value: "月度缴费",
            },
            {
              label: "季度缴费",
              value: "季度缴费",
            },
            {
              label: "半年缴费",
              value: "半年缴费",
            },
            {
              label: "全年缴费",
              value: "全年缴费",
            },
          ],
        },
        {
          type: "multipleSelect",
          label: "缴费月份",
          prop: "payMonth",
          clearable: true,
          change: (event) => {
            this.formData.payMonth = event ?? [];
          },
          optionList: getAllMonth(),
        },
        {
          type: "cascaderList",
          optionList: this.questionConfig,
          label: "部门问题",
          prop: "departmentQuestion",
          listAdd: (index) => {
            this.formData.departmentQuestion.push([]);
          },
          listRemove: (index) => {
            if (this.formData.departmentQuestion.length === 1) {
              return;
            }
            this.formData.departmentQuestion.splice(index, 1);
          },
          change: ({ event, index }) => {
            this.$set(this.formData.departmentQuestion, index, event);
          },
        },
        {
          type: "textarea",
          label: "业主问题",
          prop: "ownerQuestion",
          clearable: true,
          change: (event) => {
            this.formData.ownerQuestion = event ?? "";
          },
        },
      ];
    },
  },
  data() {
    return {
      questionConfig: [],
      formData: {
        name: "",
        groupName: "超豪样板间",
        address: "",
        homeType: "住宅",
        homeStatus: "已售已收楼",
        decorationStatus: "2",
        liveStatus: "1",
        oweStatus: "1",
        ownerType: "B 一般客户",
        payStyle: "",
        payMonth: [],
        departmentQuestion: [[]],
        ownerQuestion: "",
      },
      controlList: [],
    };
  },
};
</script>
